<template>
    <div class="common-layout">
      <el-container>
        <el-header >
          <el-text class="mx-1" size="large">五子棋对战平台</el-text>
          <div class="rLink">
            <router-link to="/"><div class="homeBotton"><span>大厅</span></div></router-link>
            <router-link to="/game"><div class="startBotton"><span>开始</span></div></router-link>
            <router-link to="/login"><div class="exitBotton"><span>退出</span></div></router-link>
          </div>
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </div>
</template>
<script setup>

</script>
<style lang="less" scoped>
@start: #b88230;
@normal: #303133;
@exit: #73767a;
@hover: #EBEEF5;
@logo-font: #303133;

  .common-layout{
    .el-container{
      .el-header{
        max-height: 80px;
        height: 50px;
        width: 100%;
        background-color: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .el-text{
          font-family:华文行楷;
          font-size: 28px;
          color: @logo-font;
        }
        .rLink{
          height: 100%;
          width: fit-content;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          a{
            height: 100%;
          }
          div{
            height: 100%;
            width: 80px;
            font-size: 22px;
            color: @normal;
            font-weight: 300;
            text-align: center;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

          }
          div:hover{
            background-color: @hover;
          }
          .homeBotton{
            color: @start;
            font-weight: 600;
          }
          .exitBotton{
            color: @exit;
          }
        }
      }
      .el-main{
        overflow: unset;
      }
    }
  }
</style>
